<template>
  <div class="newpage">
    <iu-header>
      <template #left>
        <x-icon
          @click="back"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>风险详情</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="newpage_work">
      <tab
        class="newpage_tab"
        style="z-index:0"
        active-color="#456de6"
        default-color="#fff"
        custom-bar-width="80%"
      >
        <tab-item @on-item-click="handler(1)" :selected="status == 1">
          基本信息
        </tab-item>
        <tab-item @on-item-click="handler(2)" :selected="status == 2">
          检查记录
        </tab-item>
        <tab-item @on-item-click="handler(3)" :selected="status == 3">
          隐患记录
        </tab-item>
      </tab>
      <div class="newpage_work_bottom" v-if="status === 1">
        <div class="cate-nfo">
          <div class="info-list">
            <!-- <div class="info-list-title">
              <div>{{ detail.name }}</div>
            </div> -->
            <div class="info-list-item">
              <div class="info-title">风险点：</div>
              <div class="info-value">{{ detail.checkStandardName || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">辨识部位：</div>
              <div class="info-value">{{ detail.name || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">风险级别：</div>
              <div class="info-value">
                {{
                  detail.riskRank &&
                    riskLevelOptions.find(e => e.value === detail.riskRank)
                      .label
                }}
                <span
                  class="risk-rank"
                  :class="`rank${detail.riskRank}`"
                ></span>
              </div>
            </div>
            <div class="info-list-item">
              <div class="info-title">管控部门：</div>
              <div class="info-value">{{ detail.departmentNames || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">管控岗位：</div>
              <div class="info-value">{{ detail.roleName || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">管控责任人：</div>
              <div class="info-value">{{ detail.userNames || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">措施失控表现：</div>
              <div class="info-value">{{ detail.wildManifestation || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">排查频次：</div>
              <div class="info-value">{{ detail.checkFrequency || "" }}</div>
            </div>
            <div class="info-list-item">
              <div class="info-title">主要管控措施：</div>
              <div class="info-value">{{ detail.controlMeasures || "" }}</div>
            </div>
          </div>
          <div class="detail-btn">
            <div class="btn" @click="eventCheck">
              安全检查
            </div>
          </div>
        </div>
      </div>
      <div class="newpage_work_bottom" v-else-if="status === 2">
        <!-- v-for="(item, index) in tableData"
          :key="index" -->
        <div class="cate-nfo card-list">
          <div
            class="info-list"
            v-for="item in checkList"
            :key="item.id"
            @click="eventCheckDetail(item)"
          >
            <div class="info-list-title card-title">
              <div>{{ item.createTime | formatDate }}</div>
              <div>{{ checkTypeOption[item.type] }}</div>
            </div>
            <div class="card-body">
              <div class="body-title">风险点：</div>
              <div class="body-value">{{ item.checkStandardName }}</div>
            </div>
            <div class="card-body">
              <div class="body-title">执行人：</div>
              <div class="body-value">{{ item.userName }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="not-content" v-else>
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div> -->
      </div>
      <div class="newpage_work_bottom" v-else-if="status === 3">
        <div class="newpage_work_conent" v-if="troubleList.length">
          <div class="tab-list">
            <div class="tab-item" v-for="item in tabNav" :key="item.key">
              <span>
                {{ item.num }}
              </span>
              <span>
                {{ item.value }}
              </span>
            </div>
          </div>
          <div class="trouble-type-filter">
            <select class="iu-select" required v-model="troubleLevel">
              <option value="" selected>隐患等级</option>
              <option :value="'一般隐患'">一般隐患</option>
              <option :value="'重大隐患'">重大隐患</option>
            </select>
          </div>
          <riskslist
            class="conent-list"
            :risks-item="item.wxCheckTroubleRes"
            v-for="item in troubleFilter"
            :key="item.id"
            @eventRisksList="eventRisksList"
          ></riskslist>
        </div>
        <div class="not-content" v-else>
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
        <div
          class="newpage_work_more"
          v-if="showMore"
          @click="getCertificateMore"
        >
          查看更多
        </div>
      </div>
    </div>
    <!-- <div v-transfer-dom>
      <confirm
        v-model="showConfirm"
        title="警告"
        @on-cancel="onCancel"
        @on-confirm="handleSubmit"
      >
        <p>
          有未完成的检查标准<br />
          是否确认提交？
        </p>
      </confirm>
    </div> -->
  </div>
</template>
<script>
import { Tab, TabItem, Confirm, TransferDom } from "vux";
import iuHeader from "@/components/common/header/index";
import SafetyManageDao from "@/daos/safety_manage_dao";
import iuCard from "@/components/common/card/index";
import riskslist from "@/components/common/safetymanage/riskslist";
import { GetUser } from "@/mixin";
import dayjs from "dayjs";
export default {
  name: "safetyCheckResultList",
  directives: {
    TransferDom
  },
  components: {
    Tab,
    TabItem,
    Confirm,
    iuHeader,
    iuCard,
    riskslist
  },
  data() {
    return {
      showMore: false,
      showConfirm: false,
      checkList: [],
      troubleList: [],
      checkTypeOption: ["", "通过", "不通过", "有隐患"],
      showStandardItemId: 0,
      pageSize: 10,
      pageNum: 1,
      troubleLevel: "",
      total: 0,
      detail: {},
      checkStandardItemId: 0,
      status: 1,
      store: {
        id: 0
      },
      riskLevelOptions: [
        { value: 1, label: "较低风险" },
        { value: 2, label: "一般风险" },
        { value: 3, label: "较大风险" },
        { value: 4, label: "重大风险" }
      ]
    };
  },
  created() {
    if (!this.user) {
      this.getUser();
    }
  },
  //返回首页的公共方法
  mixins: [GetUser],
  inject: ["backToHomepage"],

  activated() {
    this.checkStandardItemId = this.$route.query.id || 0;
    this.getList();
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    standardItem() {
      if (this.detail.content) {
        return JSON.parse(this.detail.content) || [];
      }
      return [];
    },
    tabNav() {
      // 1待整改3待验收5已逾期7已完成
      let tabNav = [
        { key: 1, value: "待整改", num: 0 },
        { key: 3, value: "待验收", num: 0 },
        { key: 5, value: "已逾期", num: 0 },
        { key: 7, value: "已完成", num: 0 }
      ];
      this.troubleList.forEach(element => {
        tabNav.forEach(nav => {
          if (
            nav.key == element.wxCheckTroubleRes.status ||
            (!element.wxCheckTroubleRes.status && nav.key == 1)
          ) {
            nav.num += 1;
          }
        });
      });
      return tabNav;
    },
    filterList() {
      if (this.standardItem) {
        return this.standardItem.filter(e => e.status === this.status);
      }
      return this.standardItem;
    },
    troubleFilter() {
      if (!this.troubleLevel) {
        return this.troubleList;
      }
      return this.troubleList.filter(
        e => e.wxCheckTroubleRes.troubleLevel === this.troubleLevel
      );
    }
  },
  methods: {
    init() {},
    back() {
      this.$router.go(-1);
    },
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.status = e;
      this.getList();
    },
    getList() {
      if (this.status === 1) {
        this.getCheckStandardRiskRankDetails(this.checkStandardItemId);
      } else if (this.status === 2) {
        this.getListByCheckStandardItemId(this.checkStandardItemId);
      } else {
        this.getTroubleListByCheckStandardItemId(this.checkStandardItemId);
      }
    },
    getCheckStandardRiskRankDetails(checkStandardItemId) {
      SafetyManageDao.getCheckStandardRiskRankDetails(
        checkStandardItemId,
        res => {
          if (res) {
            this.detail = res;
          }
        }
      );
    },
    getTroubleListByCheckStandardItemId(checkStandardItemId) {
      SafetyManageDao.getTroubleListByCheckStandardItemId(
        {
          checkStandardItemId,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        res => {
          if (this.pageNum === 1) {
            this.troubleList.splice(0);
          }
          if (res.content && res.content.length) {
            this.troubleList.splice(
              (this.pageNum - 1) * this.pageSize,
              this.pageSize,
              ...res.content
            );
          }
        }
      );
    },
    getListByCheckStandardItemId(checkStandardItemId) {
      SafetyManageDao.getListByCheckStandardItemId(
        { checkStandardItemId },
        res => {
          this.checkList.splice(0);
          if (res) {
            this.checkList.push(...res.content);
          }
        }
      );
    },
    getCertificateMore() {
      this.pageNum++;
      this.getTroubleListByCheckStandardItemId();
    },
    eventCheck() {
      this.$store.commit("setCheckDetails", {});
      this.$store.commit("setStandard", {});
      this.$store.commit("setStandardItem", this.detail);
      this.$router.push({
        name: "safetyCheckResult"
      });
    },
    eventCheckDetail(item) {
      this.$store.commit("setCheckDetails", {});
      this.$store.commit("setStandard", {});
      this.$store.commit("setStandardItem", this.detail);
      this.$store.commit("setStandardRecordDetail", item);
      this.$router.push({
        name: "safetyCheckResultDetail",
        query: {
          id: item.checkSecurityRecordId
        }
      });
    },
    eventCheckList(item, tag = false) {
      this.showStandardItemId =
        this.showStandardItemId === item.id ? 0 : item.id;
    },
    eventStandardItem(item, standardItem) {
      // console.log(item,standardItem);
      if (item.status !== 1 || !this.detail.userIds.includes(this.user.id)) {
        return;
      }
      this.$store.commit("setStandard", item);
      this.$store.commit("setStandardItem", standardItem);
      let { id } = item;
      this.$router.push({
        name: "safetyCheckResult",
        query: {
          id
        }
      });
    },
    onCancel() {
      this.showConfirm = false;
    },
    eventRisksList({ id }) {
      this.$router.push({
        name: "safetyRisksDetail",
        query: {
          id
        }
      });
    },
    eventSubmit() {}
  }
};
</script>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
</style>
<style lang="less" scoped>
.newpage {
  height: 100vh;
  background: #1b1c32;
  overflow-y: scroll;
}
.newpage_work {
  min-height: 100vh;
  height: auto;
  background-color: #1b1c32;
}
.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
.newpage_work_bottom {
  height: 100%;
  color: #fff;
  background: #1b1c32;
  .newpage_work_conent {
    padding: 8px;
  }
  .cate-nfo {
    height: auto;
    // min-height: calc(~"100vh" - 80px);
    padding: 8px;
    border-radius: 8px;
    background-color: #18182c;
    .info-list {
      background: #22233f;
      padding: 8px 0;
      margin: 16px 0;
      // min-height: 260px;
      border-radius: 5px;
      overflow: hidden;
      .info-list-item {
        display: flex;
        flex-wrap: wrap;
        margin: 8px 0;
        padding: 0 8px;
      }
      .info-list-title {
        color: #fff;
        font-size: 16px;
        margin: -8px 0 0;
        padding: 4px 8px;
        display: flex;
        justify-content: space-between;
        background-color: #2e2f4f;
      }
      .info-title {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
        // margin-right: 30px;
        width: 120px;
        text-align: right;
      }

      .info-value {
        flex: 1;
        font-size: 16px;
        color: #fff;
        display: flex;
        align-items: center;
        .risk-rank {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-left: 8px;
          background-color: #76bed8;
          &.rank1 {
            background-color: #76bed8;
          }
          &.rank2 {
            background-color: #e5cf65;
          }
          &.rank3 {
            background-color: #e47546;
          }
          &.rank4 {
            background-color: #e54c5e;
          }
        }
        img {
          max-width: 100px;
          height: auto;
          margin-bottom: 8px;
          margin-right: 8px;
        }
      }
      .modify-btn {
        font-size: 14px;
        margin-left: 8px;
        color: gray;
      }
      .warning {
        color: #ff2c2c;
      }
      .modify {
        font-size: 16px;
        padding: 8px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .cate-nfo-other {
      font-size: 16px;
      // padding: 0 16px;
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      justify-content: space-between;
    }
  }
  .detail-btn {
    width: 100%;
    padding: 6px;
    .btn {
      width: 40%;
      margin: 0 auto;
      padding: 4px 0;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      background: #3967dc;
      border-radius: 5px;
    }
  }
  .card-list {
    .card-title {
      display: flex;
    }
    .card-body {
      display: flex;
      align-items: center;
      padding: 4px 8px;
      margin: 4px 0;
      font-size: 16px;
      .body-title {
        color: rgba(255, 255, 255, 0.5);
      }
      .body-value {
      }
    }
  }
  .tab-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    .tab-item {
      flex: none;
      width: 22%;
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 1;
      padding: 3px 0 8px;
      background-color: #292a4d;
      color: #fff;

      span {
        margin-top: 5px;
        &:nth-child(1) {
          font-size: 16px;
        }
      }
    }
  }
  .conent-list {
    margin-bottom: 16px;
  }
}
.not-content {
  width: 100%;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.trouble-type-filter {
  padding: 0 0 8px;
  display: flex;
  justify-content: flex-end;
}
.iu-select {
  height: 26px;
  width: 25%;
  padding: 2px 4px 3px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background: transparent;
  option {
    color: #333;
    background: rgba(255, 255, 255, 0.9);
  }
}
</style>
